<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<!-- <div>
				<router-link
					v-perms="['server.server/saveUser', 'server.server/saveUser:edit']"
					:to="{path: getRoutePath('server.server/saveUser:edit')}"
				>
					<el-button type="primary" class="mb-4">
						<template #icon>
							<icon name="el-icon-Plus"/>
						</template>
						新增服务商
					</el-button>
				</router-link>
			</div> -->
			<el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
				<el-tab-pane label="待处理" :name="0"></el-tab-pane>
				<el-tab-pane label="已处理" :name="1"></el-tab-pane>
			</el-tabs>
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
				<el-table-column label="姓名" prop="name" min-width="110" />
				<el-table-column label="头像" prop="header" min-width="90">
					<template #default="{ row }">
						<image-contain
							v-if="row.header"
							:src="row.header"
							:width="60"
							:height="45"
							:preview-src-list="[row.header]"
							preview-teleported
							fit="contain"
						/>
					</template>
				</el-table-column>
				<el-table-column label="微信号" prop="wx_no" min-width="190" />
				<el-table-column label="身份证号" prop="id_card" min-width="190" />
				<el-table-column label="个人简介" prop="desc" min-width="200" >
					<template #default="{ row }">
						<div class="ml-4 overflow-hidden">
							<el-tooltip effect="dark" :content="row.desc" placement="top">
								<template #content>
									<div class="w-52">{{ row.desc }}</div>
								</template>
								<div class="text-base line-clamp-2">
									{{ row.desc }}
								</div>
							</el-tooltip>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="公司名称" prop="company" min-width="180" />
				<el-table-column label="职务" prop="position_name" min-width="160" />
				<el-table-column label="业务洽谈地址" prop="address" min-width="200" >
					<template #default="{ row }">
						<div class="ml-4 overflow-hidden">
							<el-tooltip effect="dark" :content="row.address" placement="top">
								<template #content>
									<div class="w-52">{{ row.address }}</div>
								</template>
								<div class="text-base line-clamp-2">
									{{ row.address }}
								</div>
							</el-tooltip>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="服务类型" prop="cate_name" min-width="260" />
				<el-table-column label="优势业务标签" prop="tags" min-width="180" />
				<el-table-column label="服务城市" prop="searver_area" min-width="180" />
				
				<el-table-column label="提交人姓名" prop="user_name" min-width="130" />
				<el-table-column label="提交人手机号" prop="from_account" min-width="130" />
				<el-table-column label="提交时间" prop="create_time" min-width="180" />
				<el-table-column v-if="activeName == 1" label="审核状态" prop="status" min-width="180" >
					<template #default="{ row }">
						<span v-if="row.status == 1" style="color:#67C23A;">审核通过</span>
						<span v-if="row.status == 2" style="color:#F56C6C;">审核驳回</span>
					</template>
				</el-table-column>
				<el-table-column v-if="activeName == 1" label="审核人" prop="auth_member" min-width="120" />
				<el-table-column v-if="activeName == 1" label="审核意见" prop="notice" min-width="200">
					<template #default="{ row }">
                        <div class="ml-4 overflow-hidden">
                            <el-tooltip effect="light" :content="row.notice" placement="top">
								<template #content>
									<div class="w-52">{{ row.notice }}</div>
								</template>
                                <div class="text-base line-clamp-2">
                                    {{ row.notice }}
                                </div>
                            </el-tooltip>
                        </div>
                    </template>
				</el-table-column>
				<el-table-column v-if="activeName == 1" label="审核时间" prop="auth_time" min-width="180" />
				<el-table-column label="操作" v-if="activeName == 0" width="200" fixed="right">
					<template #default="{ row }">
						<!-- <el-button v-perms="['server.server/saveUser:edit']" type="primary" link v-if="activeName == 1">
							<router-link :to="{ path: getRoutePath('server.server/saveUser:edit'), query: { id: row.id } }" > 编辑 </router-link>
						</el-button> -->
						<!-- <el-button v-perms="['server.server/delUser']" type="danger" link v-if="activeName == 1" @click="handleDelete(row.id)">删除</el-button> -->
						<!-- <el-button v-perms="['server.server/passUser']" type="primary" link v-if="activeName == 0"  @click="handlePass(row.id)">审核通过</el-button> -->
						<el-button v-perms="['server.server/passUser']" type="primary" link v-if="activeName == 0">
							<router-link :to="{ path: getRoutePath('server.server/saveUser:edit'), query: { id: row.id, type: 'pass',status: row.status } }" > 审核通过 </router-link>
						</el-button>
						<el-button v-perms="['server.server/rejectUser']" type="danger" link v-if="activeName == 0"  @click="handleCheck(row)">审核驳回</el-button>
						<!-- <el-button v-perms="['server.server/sendTable']" type="primary" link v-if="activeName == 0 && row.status == 0" @click="handleSend(row.id)">发送表单</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
		<check_demand v-model:show="checkState.show" :value="checkState.value" @confirm="handleConfirmCheck"></check_demand>
	</div>
</template>
<script lang="ts" setup name="userList">
	import { userList, delUser, rejectUser, passUser, sendTable, rejectDetail } from '@/api/service';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import EditPopup from './edit.vue';
	import check_demand from './check_demand.vue'
	import { nextTick, onActivated, reactive, ref, shallowRef } from 'vue';
	import {getRoutePath} from '@/router'

	//新增切换
	const activeName = ref(0)
	const handleClick = (val: any) => {
		console.log(val)
		// queryParams.status = val == '全部' ? ['0', '1', '2'] : val == '待处理' ? ['0'] : val == '已处理' ? ['1', '2'] : [];
		queryParams.status = val == 0 ? 0: 1; // 0：待处理 1:已处理
		getLists()
	}
	const checkState = reactive({
		show: false,
		value: '',
		status: ''
	})
	//审核通过
	const handlePass = async (value : any) => {
		console.log(value)
		await feedback.confirm('确认审核通过？')
		await passUser({ id: value })
		getLists()
	}
	const status_now:any = ref()
	// 审核驳回弹窗
	const handleCheck = (row : any) => {
		checkState.show = true
		checkState.value = row.id
		status_now.value = row.status;
	}
	const handleSend = async (id:any ) => {
		try{
			await feedback.confirm('确认给提交人的助融圈app中发送信息填写的表单？')
			await sendTable({ id })
			getLists()
		}catch(error){
			console.log(error)
		}
	}
	const handleConfirmCheck = async (value : any) => {
		console.log(value)
		if (status_now.value == 4) {
			await rejectDetail({ ...value })
		} else {
			await rejectUser({ ...value })
		}
		checkState.show = false
		getLists()
	}

	const editRef = shallowRef<InstanceType<typeof EditPopup>>()
	const showEdit = ref(false)
	const handleAdd = async (id?: number) => {
	    showEdit.value = true
	    await nextTick()
	    if (id) {
	        editRef.value?.setFormData({
	            pid: id
	        })
	    }
	    editRef.value?.open('add')
	}
	
	const handleEdit = async (data: any) => {
	    showEdit.value = true
	    await nextTick()
	    editRef.value?.open('edit')
	    editRef.value?.getDetail(data)
	}
	
	const queryParams = reactive({
		status: 0,
	})

	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: userList,
		params: queryParams
	})

	const handleDelete = async (id : number) => {
		await feedback.confirm('确认删除该服务商？')
		await delUser({ id })
		getLists()
	}

	onActivated(() => {
		getLists()
	})

	getLists()
</script>